<template>
    <div class="container flex">
        <div style="width:250px;margin-right: 10px;">
            <n-card class="side">
                <div class="flex at-center j-a">
                    <myAvatar></myAvatar>
                    <h3>用户名</h3>
                    <n-button>关注</n-button>
                </div>
                <n-divider />
                <ul class="side-ul" @click="toggleCard">
                    <li data-name="article" class="side-li active">文章</li>
                    <li data-name="collect" class="side-li">收藏</li>
                    <li data-name="like" class="side-li">点赞</li>
                    <li data-name="guanzhu" class="side-li">关注</li>
                    <li data-name="fensi" class="side-li">粉丝</li>
                </ul>
            </n-card>
        </div> 
        <div style="flex: 1;">
            <!-- 我的文章 -->
            <n-card v-show="cardType == 'article'">
                <!-- 卡片组件 -->
                <articleCard v-for="(item,index) in PublishedList" :key="index" :articleItem="item" @click="router.push({path:'/articleDetails',query:{id:item.id}})"></articleCard>
            </n-card>
            
            <!-- 我的收藏 -->
            <n-card v-show="cardType == 'collect'">
                <articleCard v-for="(item,index) in collectList" :key="index" :articleItem="item.articleMsg"></articleCard>
            </n-card>
            <!-- 我的点赞 -->
            <n-card v-show="cardType == 'like'">
                <articleCard v-for="(item,index) in likeList" :key="index" :articleItem="item.articleMsg"></articleCard>
            </n-card>
            <!-- 我的关注 -->
            <n-card v-show="cardType == 'guanzhu'">
                <n-grid x-gap="12" :cols="4" >
                    <n-gi v-for="(item,index) in guanzhuList" :key="index">
                        <n-card>
                            <div class="flex at-center">
                                <img  :src="globalProperties.$imgServer+item.avatar" alt="" style="width: 60px;height: 60px;border-radius: 50%;margin-right: 15px;">
                                <div class="flex" style="align-items: center;flex-direction: column;">
                                    <h3 class="mr10">{{item.username}}</h3>
                                </div>
                            </div>
                        </n-card>
                    </n-gi>
                </n-grid>
            </n-card>
            
            <!-- 我的粉丝 -->
            <n-card v-show="cardType == 'fensi'">
                <n-grid x-gap="12" :cols="4" >
                    <n-gi v-for="(item,index) in fensiList" :key="index">
                        <n-card>
                            <div class="flex at-center">
                                <img  :src="globalProperties.$imgServer+item.avatar" alt="" style="width: 60px;height: 60px;border-radius: 50%;margin-right: 15px;">
                                <div class="flex" style="align-items: center;flex-direction: column;">
                                    <h3 class="mr10">{{item.username}}</h3>
                                </div>
                            </div>
                        </n-card>
                    </n-gi>
                </n-grid>
            </n-card>
            <!-- 我的信息 -->
            <n-card v-show="cardType== 'myMsg'">
                <div class="flex at-center j-sb" style="width: 100%; border-bottom: 1px solid #f2f2f2;padding: 10px 0;">
                    <div style="width: 80px;height: 80px;"><img style="border: 2px solid ; width: 100%;height: 100%; border-radius: 50%;" :src="globalProperties.$imgServer+avatar" alt="" ></div>
                    <div>
                        <MyButton width="100px">修改头像</MyButton>
                    </div>
                </div>
                <div class="flex at-center j-sb" style="padding: 10px 0;border-bottom: 1px #f2f2f2 solid;" >
                    <div class="flex at-center">
                      <svg-icon :className="'msg-icon'"  iconName="icon-db_mgdb_user-copy"></svg-icon>
                      <span style="font-size: 20px;margin-left: 10px;">123</span>
                    </div>
                    <div>
                        <MyButton width="100px">修改用户名</MyButton>
                    </div>
                </div>
                <div class="flex at-center j-sb" style="padding: 10px 0;border-bottom: 1px #f2f2f2 solid;" >
                    <div class="flex at-center">
                        <svg-icon :className="'msg-icon'"  iconName="icon-yuechi"></svg-icon>
                        <span style="font-size: 20px;margin-left: 10px;">*******</span>
                    </div>
                    <div>
                        <MyButton width="100px">修改密码</MyButton>
                    </div>
                </div>
            </n-card>
        </div>
    </div>
</template>

<script setup lang="ts">
    import requestList from '@/service/request';
    import { getItem ,removeItem} from '@/utils/local';
    import {useRouter,useRoute} from 'vue-router'
    import { ref,onMounted,getCurrentInstance } from 'vue';
    import { useUserInfoStore,useAuthStore } from '@/store/main'
    const authStore = useAuthStore()
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserInfoStore()
    const curAuthorId = route.query.id
    
    const { appContext : { config: { globalProperties } } } = (getCurrentInstance() as any)
    const avatar = ref(getItem('curUserInfo').avatar) 
    const cardType = ref('article')

    const toggleCard = (e:any)=>{
        for(let i = 0;i<e.target.parentNode.children.length;i++){
            e.target.parentNode.children[i].classList.remove('active')
        }
        e.target.classList.add('active')
        cardType.value = e.target.attributes[0].value
    }

    // 文章草稿
    const draftsList = ref([]) //草稿 0
    const PublishedList = ref([]) //审核通过（已发布）2
    const AuditList = ref([]) //待审核 1 
    const FailedList = ref([]) //未通过 3
    
    

    //标签列表
    const tagsList =ref<any[]>([])
    const getTags = async () =>{
        const res = await requestList.tagListApi({all:true})
        if(res.code === 1){
            tagsList.value = res.data as any
        }
    }

    //话题列表
    const topicList = ref<any[]>([])
    const getTopic = async ()=>{
        const res = await requestList.topicListApi({all:true})
        if(res.code === 1){
            topicList.value = res.data as any
        }
    }

    // 获取文章
    const getAllArticlesbyUser = async () =>{
        const res = await requestList.articleListApi({allType:true,user_id:curAuthorId})
        if(res.code === 1){
            (res.data as any).forEach((item:any)=>{
                let tagsName:string[] = []
                let topicName:string[] = []
                let tagIds = item.tags.split(',')
                let topicIds = item.topic.split(',')
                tagsList.value.forEach((x:any)=>{
                    tagIds.forEach((y:any)=>{
                        if(x.id === Number(y)){
                            tagsName.push(x.tag_name)
                        }
                    })
                })
                topicList.value.forEach((x:any)=>{
                    topicIds.forEach((y:any)=>{
                        if(x.id === Number(y)){
                            topicName.push(x.topic_name)
                        }
                    })
                })
                item.tagsName = tagsName
                item.topicName = topicName
            })
            draftsList.value = (res.data as any).filter((item:any)=>(item.status === 0))
            AuditList.value = (res.data as any).filter((item:any)=>(item.status === 1))
            PublishedList.value = (res.data as any).filter((item:any)=>(item.status === 2))
            FailedList.value = (res.data as any).filter((item:any)=>(item.status === 3))
        }
    }

    // 获取全部文章
    const allArticleList = ref<any[]>([])
    const getAllArticles = async () =>{
        const res = await requestList.articleListApi({all:true})
        if(res.code === 1){
            allArticleList.value = (res.data as any) 
        }
    }

    // 获取点赞列表
    const likeList = ref<any[]>([])
    const getlikes = async ()=>{
        const res = await requestList.likeArticleListByUserApi({user_id:curAuthorId})
        if(res.code === 1){
            likeList.value = (res.data as any)
            likeList.value.forEach((item:any)=>{
                allArticleList.value.forEach((data:any)=>{
                    if(item.article_id == data.id){
                        item.articleMsg = data
                    }
                })
            })
            console.log(likeList.value);
            
        }
    }
    
    // 获取收藏列表
    const collectList = ref<any[]>([])
    const getCollects = async ()=>{
        const res = await requestList.collectListByUserApi({user_id:curAuthorId})
        if(res.code === 1){
            collectList.value = (res.data as any)
            collectList.value.forEach((item:any)=>{
                allArticleList.value.forEach((data:any)=>{
                    if(item.article_id == data.id){
                        item.articleMsg = data
                    }
                })
            })
            
        }
    }

    // 关注-粉丝
    const guanzhuList = ref<any[]>([]) // 关注列表
    const fensiList = ref<any[]>([]) // 粉丝列表
    
    const getGuanzhuList = async () => {
        const postData = {
            type:1,
            all:true,
            user_id:curAuthorId
        }
        const res = await requestList.subscribeByUserApi(postData)
        if(res.code === 1){
            guanzhuList.value = res.data as any
        }
    }
    const getFensiList = async () => {
        const postData = {
            type:2,
            all:true,
            user_id:curAuthorId
        }
        const res = await requestList.subscribeByUserApi(postData)
        if(res.code === 1){
            fensiList.value = res.data as any
        }
    }

    // 退出
    const logout = () => {
        removeItem('curUserInfo')
        removeItem('token')
        authStore.myToken = ''
        authStore.refreshToken = ''
        userStore.userInfo = ''
        router.push('/login')
    }
    


    

    onMounted(async ()=>{
        await getTags()
        await getTopic()
        await getAllArticles()
        await getAllArticlesbyUser()
        await getlikes()
        await getCollects()
        await getGuanzhuList()
        await getFensiList()
    })
</script>

<style lang="scss" scoped>
.side{
    &-top{
        font-weight: 600;
        font-size: 16px;
        line-height: 36px;
        height: 40px;
        border: 2px solid ;
        text-align: center;
        border-radius: 6px;
        background-color: $color3;
    }
    &-ul{
        li{
            user-select: none;
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
            transition: all .3s ;
            &:hover{
                background-color: $color3;
                border-radius: 5px;
                font-weight: 600;
                font-size: 18px;
            }
        }
        .active{
            background-color: $color3;
            border-radius: 5px;
            font-weight: 600;
            font-size: 18px;
        }
    }
}

.grid-card{
    margin-top: 10px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #f2f2f2;
}
.msg-icon{
    width: 24px;
    height: 24px;
}


</style>